<template>
  <div>
    <h2>路由</h2>
    <a href="#/home">首页</a> &nbsp;

    <a href="#/movie">电影</a> &nbsp;
    <a href="#/about">关于</a>
    <component :is="comName"></component>
  </div>
</template>

<script>
import MyHome from "@/components/MyHome";
import MyAbout from "@/components/MyAbout";
import MyMovie from "@/components/MyMovie";
export default {
  components: {
    MyHome,
    MyAbout,
    MyMovie,
  },
  data() {
    return {
      comName: "MyHome",
    };
  },
  created() {
    window.addEventListener("hashchange", () => {
      let hash = location.hash;
      if (hash === "#/hoem") {
        this.comName = "MyHome";
      } else if (hash === "#/movie") {
        this.comName = "MyMovie";
      } else if (hash === "#/about") {
        this.comName = "MyAbout";
      } else {
        this.comName = "MyHome";
      }
    });
  },
};
</script>

<style  scoped>
</style>